<template>
	<view class="container">
    <view class="tips">从本地相册选择合适的头像上传</view>
    <view class="avatar-box" @tap="uploadImg">
       <image class="avatar-img" :src="avatar || './static/upload_avatar.png'"></image>
       <!-- <image class="avatar-img" src="./static/avatar.png"></image> -->
    </view>
    <view class="operate-box" @tap="onSubmit">保存</view>
	</view>
</template>

<script>
  import {updateUserInfo} from '@/api/info_setting.js';
    
	export default {
		data() {
			return {
          avatar: '',
          uid: ''
			}
		},
    onLoad(options){
      if(options.uid){
        this.uid = options.uid
      }
    },
    methods: {
           uploadImg(){
             let that = this
             that.$util.uploadImageOne('upload/image', (res) => {
               that.avatar = res.data.url;
             });
           },
           onSubmit(){
             let {avatar, uid} = this
             if(!avatar){
               uni.showToast({
                 icon: 'none',
                 title: '请上传头像'
               })
               return;
             }
             let params = {
               id: uid,
               avatar,
             }
            updateUserInfo(params).then(res => {
              console.log('res', res)
              if(res.status == 200){
                uni.showToast({
                  icon: 'none',
                  title: '保存成功',
                  success() {
                  	uni.navigateBack()
                  }
                })
              }else{
                 uni.showToast({ title:res.msg, icon:'none' })
              }
            }).catch((err)=>{
                uni.showToast({ title:err, icon:'none' })
            })
           }
    }
	}
</script>

<style lang="scss" scoped>
	page {
    min-height: 100vh;
		background-color: rgb(248,249,252);
	}

	.container {
		padding: 32rpx;
	}
  .tips{
    margin: 124rpx auto 78rpx;
    font-weight: 500;
    font-size: 26rpx;
    color: 8D8E90;
    text-align: center;
  }
  .avatar-box{
    position: relative;
    width: 192rpx;
    height: 192rpx;
    margin: 0 auto;
    .avatar-img{
      width: 192rpx;
      height: 192rpx;
      border-radius: 192rpx;
    }
  }
  .operate-box{
    width: 686rpx;
    height: 96rpx;
    line-height: 96rpx;
    margin: 200rpx auto 30rpx;
    box-sizing: border-box;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    font-weight: 600;
    font-size: 32rpx;
    color: #FFFFFF;
    background: #008DFF;
    text-align: center;
    border-radius: 12rpx;
  }
</style>
